<template>
  <div style="display: flex; justify-content: space-between;height: 100%">
    <div style="height: 100%;width: 49.5%;">
<!--      <div style="height: 50%">-->
<!--        <div class="bgs">-->
<!--          <Echart :options="options1" height="100%" width="100%"></Echart>-->
<!--        </div>-->
<!--      </div>-->
      <div style="height: 50%">
        <div class="bgs">
          <Echart :options="options2" height="100%" width="100%"></Echart>
        </div>
      </div>
    </div>
    <div style="height: 100%;width: 49.5%;">
      <div class="bgs">
        <dv-scroll-board :config="config" style="height: 100%; width: 100%;"/>
      </div>
    </div>
  </div>
</template>

<script>
import Echart from '@/common/echart'

export default {
  name: "index",
  components: {
    Echart
  },
  data() {
    return {
      options1: {
        title: {
          text: '质控报警',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item',
          // formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: "vertical",
          top: "middle",
          right: "10%",
          data: ['低', '中', '高']
        },
        label: {
          formatter: '{b}：{c}  {per|{d}%}  ',
          // backgroundColor: '#F6F8FC',
          // borderColor: '#8C8D8E',
          borderWidth: 1,
          borderRadius: 4,

          rich: {
            a: {
              color: '#6E7079',
              lineHeight: 22,
              align: 'center'
            },
            hr: {
              borderColor: '#8C8D8E',
              width: '100%',
              borderWidth: 1,
              height: 0
            },
            b: {
              color: '#4C5058',
              fontSize: 14,
              fontWeight: 'bold',
              lineHeight: 33
            },
            per: {
              color: '#fff',
              backgroundColor: '#4C5058',
              padding: [3, 4],
              borderRadius: 4
            }
          }
        },
        series: [
          {
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
              {value: 10, name: '低', itemStyle: {color: '#13b1ff'}},
              {value: 15, name: '中', itemStyle: {color: '#ff5c00'}},
              {value: 30, name: '高', itemStyle: {color: '#a5a5a5'}}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      options2: {
        title: {
          text: '质控数据',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item',
          // formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: "vertical",
          top: "middle",
          right: "10%",
          data: ['在控', '失控', '警告']
        },
        label: {
          formatter: '{b}：{d}% \n数量：{c} ',
          // backgroundColor: '#F6F8FC',
          // borderColor: '#8C8D8E',
          borderWidth: 1,
          borderRadius: 4,
          rich: {
            a: {
              color: '#6E7079',
              lineHeight: 22,
              align: 'center'
            },
            hr: {
              borderColor: '#8C8D8E',
              width: '100%',
              borderWidth: 1,
              height: 0
            },
            b: {
              color: '#4C5058',
              fontSize: 14,
              fontWeight: 'bold',
              lineHeight: 33
            },
            per: {
              color: '#fff',
              backgroundColor: '#4C5058',
              padding: [3, 4],
              borderRadius: 4
            }
          }
        },
        series: [
          {
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
              {value: 0, name: '在控', itemStyle: {color: '#13b1ff'}},
              {value: 0, name: '失控', itemStyle: {color: '#ff5c00'}},
              {value: 0, name: '警告', itemStyle: {color: '#a5a5a5'}}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      config: {
        headerBGC: "rgb(97 89 89 / .6)",
        header: ['序号', '质控名称', '质控批号', '质控水平', '质控状态'],
        rowNum: 20,
        data: []
      }
    }
  },
  mounted() {
    this.getQCAlarm()
  },
  methods: {
    /**
     * 获取质控报警数据
     */
    getQCAlarm() {
      this.$http.post(this.urlInterface.qualityControlAlarm).then(res => {
        this.options2.series[0].data[0].value = res.data.data.inControl
        this.options2.series[0].data[1].value = res.data.data.outOfControl
        this.options2.series[0].data[2].value = res.data.data.warning

        //处理后台数据
        console.log(res.data.data.data, 'res.data.data.data');

        this.config.data = []
        res.data.data.data.map(e => {
          let arr = [e.qualityControlId, e.name, e.batchCode, e.level, e.status]
          this.config.data.push(arr)
        })
        console.log(this.config.data, 'this.config.data')
        /**
         * 使用ES6拓展运算符生成新的props对象
         * 组件侦知数据变化 自动刷新状态
         * 文章地址：https://blog.csdn.net/qq_46566911/article/details/109635852
         */
        console.log({...this.config})
        this.config = { ...this.config }

      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "src/assets/scss/public.scss";
</style>
